<template>
	<!-- 图片预览组件 -->
	<div style="min-width: 60px">
		<a @click="aClick">
			<img :src="imageUrl" :style="`width:${width}px;height:${height}px;`" alt="">
		</a>
		<div v-show="false">
			<div>
				<viewer ref="viewerComponent" :images="imageList" @inited="inited">
					<img v-for="(item, index) in imageList" :key="index" class="preview-img"
						:style="`width:${width}px;height:${height}px;`"
						:src="`${$store.state.baseUrl}/sysFileInfo/preview?id=${item}`" />
				</viewer>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'UploadImageMore',
	props: {
		images: { type: String, default: '' },  //图片url地址，是以逗号分隔的id
		imageUrl: { type: String, default: '' },  //图片url地址
		width: { type: [Number, String], default: "45" },
		height: { type: [Number, String], default: "45" },
	},
	data() {
		return {
			$viewer: null,
			imageList: [],
		}
	},
	mounted() {
	},
	methods: {
		inited(viewer) {
			this.$viewer = viewer
		},
		imageClcik(item) {
			console.log(item);

		},
		aClick() {
			this.imageList = [];
			this.images.split(",").forEach(val => {
				this.imageList.push(val);
			})
			console.log(this.images);
			this.$refs.viewerComponent.$viewer.show()
		}
	}
}
</script>

<style scoped lang="less">
.wrapper {
	overflow: hidden;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.preview-img {
	transition: all 0.4s;

	&:hover {
		transform: scale(1.3);
	}
}
</style>